<template>
    <div>
        <h2>{{question[index].title}}</h2>
        <ul>
            <li :class="{'red':ind===chooseIndex,'blue':item.is_stand_answer===1&&question[index].flag !=null }" @click="choose(item,ind)" v-for="(item,ind) in question[index].answer">
                {{item.answer_name}}
            </li>
        </ul>
    </div>
</template>
<script>
import {mapState,mapMutations,mapActions} from 'vuex'
export default {
    computed:{
        ...mapState(['question','index','chooseIndex'])
    },
    methods:{
        ...mapMutations(['chooseAnswer']),
        ...mapActions(['nextQuestion']),
        choose(item,ind){
            this.chooseAnswer({item,ind});
            if(this.index == this.question.length-1){
                setTimeout(() => {
                    window.localStorage.setItem('complated','true')
                    this.$router.push('/last');
                },2000)
            }else{
                this.nextQuestion();    
            }
        }
    }
}
</script>

<style lang="scss"> 
    .red{
        color:red;
    }
    .blue{
        background: blue;
    }
</style>

